<template>
  <div id="pnr-detail" class="card col-12 px-0 mt-5">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb">
        <li class="breadcrumb-item ms-1">
          <router-link to="/h5/tools/pnrs">PNR</router-link>
        </li>
        <li class="breadcrumb-item active">详情</li>
        <span class="ms-auto me-1" @click.stop="back()">返回</span>
      </ol>
    </nav>

    <template v-if="detail">
      <div class="card-body">
        <dl class="row">
          <dt class="col-4 text-end">编码</dt>
          <dd class="col-8">{{ detail.pnrNo }}</dd>
          <dt class="col-4 text-end">大编码</dt>
          <dd class="col-8">{{ detail.bigPnrNo }}</dd>
          <dt class="col-4 text-end">航段状态</dt>
          <dd class="col-8">{{ detail.segStatus }}</dd>
          <dt class="col-4 text-end">行程</dt>
          <dd class="col-8">
            {{ detail.dport }}{{ detail.aport }} {{ detail.ddate }}
          </dd>
          <dt class="col-4 text-end">航段数</dt>
          <dd class="col-8">{{ detail.segCount }}</dd>
          <dt class="col-4 text-end">乘客数</dt>
          <dd class="col-8">{{ detail.psgCount }}</dd>
          <dt class="col-4 text-end">eterm用户名</dt>
          <dd class="col-8">{{ detail.etermUsername }}</dd>
          <dt class="col-4 text-end">创建时间</dt>
          <dd class="col-8">{{ detail.createTime }}</dd>
          <dt class="col-4 text-end">更新时间</dt>
          <dd class="col-8">{{ detail.lastUpdate }}</dd>
        </dl>
      </div>
      <div class="card-body bg-faded" v-if="detail.pnrDetail != null">
        <div v-html="'<pre>' + detail.pnrDetail + '</pre>'"></div>
      </div>
    </template>
  </div>
</template>

<script>
import { getPnr } from "@/api/misc.js";

export default {
  name: "PnrDetail",
  computed: {
    detail() {
      return this.$store.state.pnrDetail;
    },
  },
  mounted: function () {
    // var id = this.$route.params.id
    // if (id !== undefined) {
    //   // console.log(id)
    //   this.refreshPnrDetail(id)
    // }
  },
  activated: function () {
    // var id = this.$route.params.id
    // // console.log(id)
    // if (id !== undefined) {
    //   this.refreshPnrDetail(id)
    // }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", {
        loading: false,
      });
    },
    refreshPnrDetail: function (id) {
      this.showLoading();

      getPnr(
        id,
        (info) => {
          if (info !== null) {
            this.$store.commit("setPnrDetail", info);
          }
        },
        () => {
          this.hideLoading();
        }
      );
    },
  },
};
</script>
